<template>
  <div class="report-container">
    <header>
      <el-row>
        <el-col :span="3">
          <div class="logo"><img src="https://www.acmcoder.com/images/logo.png" alt="logo"></div>
        </el-col>
        <el-col :span="18">
          <p class="title">某某测试开始</p>
        </el-col>
      </el-row>
    </header>
    <div class="control">
      <el-button icon="el-icon-s-data" size="mini" type="primary">导出PDF报告</el-button>
      <el-button icon="el-icon-s-operation" size="mini" type="primary" @click="openAll">{{ isOpen !== false ? '展开全部' : '关闭全部' }}</el-button>
    </div>
    <section class="section">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="考生信息" name="1">
          <el-table
            class="table"
            :data="data"
            :show-header="false"
          >
            <el-table-column
              align="center"
              label="头像"
              class="cursor-move"
              width="150px"
            >
              <template slot-scope="scope">
                <el-avatar style="text-align: left;" shape="square" :size="100" fit="fill" :src="scope.row.url"/>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="考生信息"
              class="cursor-move"
            >
              <template slot-scope="scope">
                <div class="cands-news" style="text-align: left;">
                  <el-row>
                    <el-col :span="6"><span class="list">姓名：</span>{{ scope.row.name }}</el-col>
                    <el-col :span="12"><span class="list">身份证：</span>{{ scope.row.idNumber }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6"><span class="list">性别：</span>{{ scope.row.gender === 1 ? '男' :'女' }}</el-col>
                    <el-col :span="12"><span class="list">考生编号：</span>{{ scope.row.idNumber }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6"><span class="list">手机号：</span>{{ scope.row.name }}</el-col>
                    <el-col :span="12"><span class="list">专业：</span>{{ scope.row.major }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6"><span class="list">毕业院校：</span>{{ scope.row.university }}</el-col>
                    <el-col :span="12"><span class="list">邮箱：</span>{{ scope.row.email }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6"><span class="list">学历：</span>{{ scope.row.degree }}</el-col>
                    <el-col :span="12"><span class="list">城市：</span>{{ scope.row.cityStay }}</el-col>
                  </el-row>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="考试成绩" name="2">
          <el-table
            :data="scoreList"
            border
          >
            <el-table-column
              align="center"
              label="试卷名称"
              prop="name"
            />
            <el-table-column
              align="center"
              label="得分/总分"
            >
              <template slot-scope="scope">
                {{ scope.row.score }}/{{ scope.row.allScore }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="正确/总数"
            >
              <template slot-scope="scope">
                {{ scope.row.score }}/{{ scope.row.allScore }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="用时"
              prop="times"
            />
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="做答记录" name="3">
          <el-table
            :data="log"
            border
          >
            <el-table-column
              label="考试时间"
              prop="times"
            />
            <el-table-column
              label="考生操作"
              prop="contol"
            />
          </el-table>
        </el-collapse-item>
        <!--以上三处为特定内容，不会随机渲染-->
        <el-collapse-item title="选择题" name="4"/>
        <el-collapse-item title="填空题" name="5"/>
        <el-collapse-item title="问答题" name="6"/>
        <el-collapse-item title="编程题" name="7">
          <el-row>
            <el-col :span="12">
              编程题详情
            </el-col>
            <el-col :span="12">
              <pre v-highlightjs="sourcecode"><code class="javascript"/></pre>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </section>
  </div>
</template>
<script>
export default {
  name: 'Report',
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      sourcecode: 'const s = new Date().toString()',
      isOpen: false,
      data: [
        { url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          cityHope: '北京',
          cityStay: '北京',
          confirmState: 0,
          degree: '硕士',
          email: '1015838003@qq.com',
          gender: 1,
          graduateTime: '2018-06-30T16:00:00.000+0000',
          idNumber: '110100000000000001',
          idType: 0,
          major: '计算机科学',
          mobile: '18311022386',
          name: '齐月',
          resumeNum: '100029',
          sendMailState: 0,
          sendMsgState: 0,
          state: 0,
          university: '清华大学'
        }],
      scoreList: [
        { name: '试卷名称', allNum: 20, allScore: 10, score: 10, everScore: 10, times: 20 },
        { name: '试卷名称', allNum: 20, allScore: 10, score: 10, everScore: 10, times: 20 },
        { name: '试卷名称', allNum: 20, allScore: 10, score: 10, everScore: 10, times: 20 },
        { name: '试卷名称', allNum: 20, allScore: 10, score: 10, everScore: 10, times: 20 }
      ],
      log: [
        { contol: '登录', times: '2019 10 11 12:20:30' },
        { contol: '做答填空题', times: '2019 10 11 12:30:30' },
        { contol: '做答问答题', times: '2019 10 11 12:40:30' },
        { contol: '交卷', times: '2019 10 11 12:50:30' }
      ]
    };
  },
  methods: {
    openAll() {
      if (this.isOpen) {
        this.activeNames = ['1', '2', '3', '4', '5', '6', '7'];
      } else {
        this.activeNames = [];
      }
      this.isOpen = !this.isOpen;
    }
  }
};
</script>
<style lang="scss" scoped>
.report-container{
    header{
        height: 60px;
        text-align: center;
        background: #fff;
        -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
        box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
        padding:0px 10px;
        box-sizing: border-box;
          .logo{
            width: 110px;
            margin: 5px 0px;
            img{
              max-width: 100%;
              max-height: 100%;
            }
          }
          .title{
              font-size: 22px;
              margin: 0;
              line-height: 60px;
          }
    }
    section.section{
      clear: both;
      margin-top:20px;
    }
    .control{
        clear: both;
        margin: 20px 0px;
        float: right;
        overflow: hidden;
    }
    .list{
      display: inline-block;
      width: 70px;
      text-align: right;
      margin-right: 10px;
    }

}
</style>
